<template>
  <lay-layer v-model="layerRef.open"
             :title="layerRef.title"
             :area="layerRef.area"
             :shade-close="layerRef.shadeClose"
             :maxmin="layerRef.maxmin">

    <div style="padding: 20px">
      <lay-form :model="productClazzInfo"
                ref="layProductClazzInfoForm"
                :label-position="'right'"
                isLabelTooltip
                labelWidth="130px" style="margin: 20px">
              <lay-form-item label="第一层ID" prop="rootId" mode="inline" :required="layerRef.required" >
                <lay-input placeholder="请输入第一层ID" v-model="productClazzInfo.rootId" :disabled="layerRef.disabled"></lay-input>
              </lay-form-item>

              <lay-form-item label="上级ID" prop="parentId" mode="inline" :required="layerRef.required" >
                <lay-input placeholder="请输入上级ID" v-model="productClazzInfo.parentId" :disabled="layerRef.disabled"></lay-input>
              </lay-form-item>

              <lay-form-item label="分类层级, 最多三级" prop="clazzLevel" mode="inline" :required="layerRef.required" >
                <lay-input placeholder="请输入分类层级, 最多三级" v-model="productClazzInfo.clazzLevel" :disabled="layerRef.disabled"></lay-input>
              </lay-form-item>

              <lay-form-item label="标题名称" prop="clazzTitle" mode="inline" :required="layerRef.required" >
                <lay-input placeholder="请输入标题名称" v-model="productClazzInfo.clazzTitle" :disabled="layerRef.disabled"></lay-input>
              </lay-form-item>

              <lay-form-item label="图标" prop="clazzIcon">
                <lay-upload  url="https://www.mocky.io/v2/5cc8019d300000980a055e76" @cutdone="getCutDone" :beforeUpload="beforeUpload10" acceptMime="images" @cutcancel="getCutCancel" :cut="true" :cutOptions="cutOptions" @done="getFileDone">
                  <template #preview>
                    <div class="easy-wrap" v-if="cutUrl">
                      <img :src="cutUrl"/>
                    </div>
                  </template>
                </lay-upload>
              </lay-form-item>

              <lay-form-item label="排序" prop="sortNum" mode="inline" :required="layerRef.required" >
                <lay-input placeholder="请输入排序" v-model="productClazzInfo.sortNum" :disabled="layerRef.disabled"></lay-input>
              </lay-form-item>

              <lay-form-item label="是否展示/有效标志: Y-有效;N-无效" prop="validFlag" mode="inline" :required="layerRef.required" >
                <lay-input placeholder="请输入是否展示/有效标志: Y-有效;N-无效" v-model="productClazzInfo.validFlag" :disabled="layerRef.disabled"></lay-input>
              </lay-form-item>

              <lay-form-item label="备注" prop="remarks"  >
                <lay-textarea placeholder="请输入备注" v-model="productClazzInfo.remarks" :disabled="layerRef.disabled"></lay-textarea>
              </lay-form-item>

              <lay-form-item label="删除标志: Y-已删除;N-未删除" prop="removeFlag" mode="inline" :required="layerRef.required" >
                <lay-input placeholder="请输入删除标志: Y-已删除;N-未删除" v-model="productClazzInfo.removeFlag" :disabled="layerRef.disabled"></lay-input>
              </lay-form-item>

      </lay-form>

    </div>


      <template v-slot:footer>
        <div class="fly-form-footer">
          <lay-button v-if="layerRef.submit" class="fly-button fly-ok-button " @click="saveProductClazzInfoHandler">
            <lay-icon class="layui-icon-ok"></lay-icon>
            保存
          </lay-button>
          <lay-button class="fly-button fly-close-button" @click="onTapClose">
            <lay-icon class="layui-icon-close"></lay-icon>
            关闭
          </lay-button>
        </div>
      </template>


  </lay-layer>
</template>


<script setup lang="ts"  name="refProductClazzInfo">
  import {reactive, ref} from "vue";
  import {FormTypeEnum} from "@/fly/biz/BizModel";
  import {ProductClazzInfo} from "@/api/product/model/ProductClazzInfoModel";
  import useTenantInfoComposable from "@/composables/product/ProductClazzInfoComposable";

  const {
      productClazzInfo,
      productClazzInfoDataHandler
  } = useTenantInfoComposable();

  const layProductClazzInfoForm = ref<any>();

  /* 弹窗 */
  const layerRef = reactive<any>({
    open: false,
    title: '产品类目',
    area: ['500px', '550px'], // 宽度,  高度
    disabled: false,
    shadeClose: false,
    maxmin: false,
    submit: true,
  })


  /**
   * 提交
   */
  function saveProductClazzInfoHandler() {
    layProductClazzInfoForm.value.validate((isValidate: boolean, model: ProductClazzInfo, errors: any[]) => {
      if (!isValidate) {
        return;
      }
      productClazzInfoDataHandler(model);
      // onTapClose(); // 关闭弹窗
      // console.log('数据保存', productClazzInfo.value);
      //  emit('click', productClazzInfo)
    });
  }


  //显示弹框
  const open = (type: FormTypeEnum, row?: ProductClazzInfo) => {
    layerRef.title = type + '产品类目';
    if (null !== row) {
        productClazzInfo.value = JSON.parse(JSON.stringify(row))
    } else {
        productClazzInfo.value = {
              id: '' ,  // 主键唯一标识
              appId: '' ,  // 应用ID, 备用字段
              tenantId: '' ,  // 租户ID
              rootId: '' ,  // 第一层ID
              parentId: '' ,  // 上级ID
              clazzLevel: '' ,  // 分类层级, 最多三级
              clazzTitle: '' ,  // 标题名称
              clazzIcon: '' ,  // 图标
              sortNum: '' ,  // 排序
              validFlag: '' ,  // 是否展示/有效标志: Y-有效;N-无效
              remarks: '' ,  // 备注
              removeFlag: ''  // 删除标志: Y-已删除;N-未删除
        }
    }

    layerRef.disabled = false;
    layerRef.submit = true;
    layerRef.required = true;
    if (FormTypeEnum.VIEW === type) {
      layerRef.disabled = true;
      layerRef.submit = false;
      layerRef.required = false;
    }

    layerRef.open = true;
  };


  /**
   * 关闭按钮
   */
  const onTapClose = () => {
    layerRef.open = false;
  }


  //在组件中，属性和方法，只能对当前template,
  //外部需要使用的时候，需要使用 defineExpose 暴露出去给父组件
  defineExpose({
    open,
    onTapClose
  });

  //注册事件
 // const emit = defineEmits(['click']);

</script>


<style scoped>

</style>